<template>
  <div class="margin">
    <el-card>
      <div class="header">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="销售额" name="销售额"></el-tab-pane>
          <el-tab-pane label="访问量" name="访问量"></el-tab-pane>
        </el-tabs>
        <div class="tag">
          <span @click="setDay">今日</span>
          <span @click="setWeek">本周</span>
          <span @click="setMonth">本月</span>
          <span @click="setYear">本年</span>
          <el-date-picker
            class="picker"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="mini"
            value-format="yyyy-MM-dd"
            v-model="date"
          >
          </el-date-picker>
        </div>
      </div>
      <el-row :gutter="10" class="margin">
        <el-col :span="18">
          <h3>{{ activeName }}趋势</h3>
          <!-- 趋势统计图 -->
          <div class="charts" ref="charts"></div>
        </el-col>
        <el-col :span="6">
          <span style="margin-left: 50px; font-weight: bold"
            >门店{{ activeName }}排行</span
          >
          <ul>
            <li
              v-for="item in activeName == '销售额'
                ? data.orderRank
                : data.userRank"
              :key="item.no"
            >
              <span :class="item.no > 3 ? '' : 'index'">{{ item.no }}</span>
              <span class="name">{{ item.name }}</span>
              <span class="count">{{ item.money }}</span>
            </li>
          </ul>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import echarts from "echarts";
import dayjs from "dayjs";
import { mapState } from "vuex";
export default {
  data() {
    return {
      activeName: "销售额",
      date: [],
      myCharts: null,
    };
  },
  mounted() {
    this.$store.dispatch("getData");
    //初始化echarts实例
    this.myCharts = echarts.init(this.$refs.charts);
    this.myCharts.setOption({
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: [],
          axisTick: {
            alignWithLabel: true,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "销售额",
          type: "bar",
          barWidth: "60%",
          data: [],
          color: "#FFA500",
        },
      ],
    });
    //配置数据
  },
  watch: {
    activeName() {
      this.myCharts.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data:
              this.activeName == "销售额"
                ? this.data.orderFullYearAxis
                : this.data.userFullYearAxis,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "销售额",
            type: "bar",
            barWidth: "60%",
            data:
              this.activeName == "访问量"
                ? this.data.orderFullYear
                : this.data.userFullYear,
            color: "#FFA500",
          },
        ],
      });
    },
    // 第一次渲染的默认数据
    data() {
      this.myCharts.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.data.userFullYearAxis,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "销售额",
            type: "bar",
            barWidth: "60%",
            data: this.data.userFullYear,
            color: "#FFA500",
          },
        ],
      });
    },
  },
  methods: {
    // 标题的切换
    handleClick(tabs) {
      this.activeName = tabs.name;
    },
    setDay() {
      const day = dayjs().format("YYYY-MM-DD");
      this.date = [day, day];
    },
    setWeek() {
      const start = dayjs().day(1).format("YYYY-MM-DD");
      const end = dayjs().day(7).format("YYYY-MM-DD");
      this.date = [start, end];
    },
    setMonth() {
      const start = dayjs().startOf("month").format("YYYY-MM-DD");
      const end = dayjs().endOf("month").format("YYYY-MM-DD");
      this.date = [start, end];
    },
    setYear() {
      const start = dayjs().startOf("year").format("YYYY-MM-DD");
      const end = dayjs().endOf("year").format("YYYY-MM-DD");
      this.date = [start, end];
    },
  },
  computed: {
    ...mapState({
      data: (state) => state.home.data,
    }),
  },
};
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
span {
  margin: 0 10px;
}
.charts {
  width: 100%;
  height: 300px;
}
ul {
  list-style: none;
}
ul li {
  margin: 20px 0;
}
li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.index {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: black;
  color: white;
  text-align: center;
  line-height: 20px;
}
.tag {
  cursor: pointer;
}
</style>
